<script setup>

import MyTable from "@/common/myTable.vue";
import CardArea from "@/components/cardArea.vue";
import {onMounted, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {deleteFile, getFile} from "@/api/file.js";
import {baseURL} from "@/request/request.js";

const pageData = ref({
  list: [],
  total: undefined,
})

const searchData = ref({
  page: 1,
  size: 10
})
//获取列表
const getList = async () => {
  const {data, code, msg} = await getFile(searchData.value)
  if (code !== 200) {
    ElMessage.error(msg)
    return
  }
  pageData.value = data
}
//删除
const del = async (id) => {
  ElMessageBox.confirm(
      '是否删除此文件？',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(async () => {
        const {code, msg} = await deleteFile(id)
        if (code !== 200) {
          ElMessage.error(msg)
          return
        }
        ElMessage.success(msg)
        await getList()
      })
      .catch(() => {
        ElMessage.info('已取消')
      })
}
//要修改的用户id
const id = ref(undefined)
//操作开关
const actionFlag = ref(false)

onMounted(() => {
  getList()
})

const columns = [
  {key: 'id', title: 'id'},
  {key: 'name', title: '文件名'},
  {key: 'suffix', title: '文件后缀'},
  {key: 'size', title: '文件大小(字节)', width: '150px'},
  {key: 'createdTime', title: '上传时间', width: '220px'},
  {key: 'action', title: '操作'},
]
</script>

<template>
  <!--表格数据显示的地方-->
  <card-area title="文件管理">

    <my-table :list="pageData.list" v-model:search-data="searchData" :columns="columns" :total="pageData.total"
              @load="getList">

      <template #action="{row}">
        <el-button type="primary" plain @click="({view}) => {
          view.open(`${baseURL+row.url}`)
        }">查看
        </el-button>
        <el-button type="danger" plain @click="del(row.id)">删除</el-button>
      </template>

    </my-table>

  </card-area>
</template>

<style scoped lang="scss">

</style>